﻿@page "/card/multiple-content"
@inherits SampleBaseComponent;

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SampleDescription>
    <p>This sample demonstrates card with multiple contents.</p>
</SampleDescription>
<ActionDescription>
    <p>Card is a small container in which user can show defined content in specific structure and it is flexible and extensible.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-lg-6 col-md-6">
            <SfCard ID="FirstCard">
                <CardContent Content="A creator of online tutorials for Microsoft technologies, your controls helped to provide a rich user experience. I wanted a look and feel like a Windows Store app." />
                <CardHeader Title="Jono Walker" SubTitle="Walkerscott" ImageUrl="images/cards/steven.png" />
            </SfCard>
        </div>
        <div class="col-lg-6 col-md-6">
            <SfCard ID="SecondCard">
                <CardContent Content="An excellent toolset and a great support team. I’ve been using Syncfusion’s products for a couple of years, and they save me a lot of time on development." />
                <CardHeader Title="Oswaldo Diaz" SubTitle="Product Manager in Hipermetrics.com" ImageUrl="images/cards/nancy.png" />
            </SfCard>
        </div>
    </div>
</div>


<style>
    .row {
        width: 85%;
        margin: auto;
        padding-top: 5%;
    }

    .e-card .e-card-header .e-card-header-caption .e-card-header-title {
        font-family: Helvetica-Bold;
        color: #007BFF;
        font-weight: bold;
        font-size: 16px;
    }

    .e-card .e-card-header .e-card-header-image {
        height: 48px;
        width: 48px;
    }

    .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
        padding-top: 0px;
        font-family: Helvetica;
        color: #878787;
        font-size: 12px;
    }

    .e-card-header-image {
        height: 48px;
        width: 48px;
    }

    .e-card {
        margin: 5px;
    }

    .e-card-content {
        font-family: Helvetica, 'Segoe UI'
    }

    .col-lg-6,
    .col-md-6 {
        padding: 20px;
    }
</style>
